<template>
  <div>
    <div class="fixed">
        <header>
          <p>我的发票</p>
          <span><img src="../assets/images/jia.png" alt=""> </span>
        </header>
        <nav>
            <select name="" id="" v-model="invoicesType" @change="type()">
              <option value="0">发票类型</option>
              <option value="1">增值税专票</option>
              <option value="2">增值税普票</option>
              <option value="3">电子发票</option>
              <option value="4">机动车发票</option>
            </select>
            <select name="" id="" v-model="invOrderName" @change="timeOrder()">
              <option value="0">排序</option>
              <option value="lursj">录入日期</option>
              <option value="kaiprq">开票日期</option>
            </select>
            <select name="" id="" v-model="invVeriStatus" @change="invVStatus()">
              <option value="4">查验状态</option>
              <option value="0">待验票</option>
              <option value="1">验票成功</option>
              <option value="2">验票中</option>
              <option value="3">验票失败</option>
            </select>
            <select name="" id="" v-model="invReimbStatus" @change="invRStatus()">
              <option value="4">报销状态</option>
              <option value="0">未入账</option>
              <option value="1">待入账</option>
              <option value="2">已入账</option>
              <option value="3">入账失败</option>
            </select>
          </nav>
    </div>
  
    <!-- 查询结果显示 -->
    <div class="con" id="con">
      <div class="voiceList" v-for="item,index in invoices">
        <p>
          <label>发票代码</label>:
          <span>{{item.invCode}}</span>
          <router-link :to="{name:'inVoiceDetail',params:{invCode:item.invCode,invNumber:item.invNumber}}">
            <i style="color:#3B9E8C">详情查看</i>
          </router-link>

        </p>
        <p>
          <label>发票号码</label>:
          <span>{{item.invNumber}}</span>
          <i v-show="item.showV0">入库保存</i>
          <i v-show="item.showV2">未查验</i>
          <i v-show="item.showV4" style="color:blue">验票中</i>
          <i style="color:#3B9E8C" v-show="item.showVd01">验票成功</i>
          <i v-show="item.showV5" style="color:red">验票失败</i>

        </p>
        <p>
          <label>发票日期</label>:
          <span>{{item.issueDate}}</span>
          <i style="color:#3B9E8C" @click="selectImage(item.imageContent)" v-show="item.showYt">原图查看</i>
        
          
        </p>
        <p>
          <label>发票类型</label>:
          <span>{{item.invType}}</span>
          <i v-show="item.showR0">未审核报销</i>
          <i v-show="item.showR1" style="color:blue">审核中</i>
          <i v-show="item.showR2" style="color:#3B9E8C">报销审核通过</i>
          <i v-show="item.showR3" style="color:red">报销审核失败</i>

        </p>
        <p>
          <label>金额</label>:
          <span style="color:#0099ff">¥ {{item.amount}}</span>
        </p>
      </div>

    </div>

    <footer>
      <ul>
        <router-link to="/">
          <li>
            <img src="../assets/images/home.png" alt="">
            <p>发票采集</p>
          </li>
        </router-link>
        <li>
          <img src="../assets/images/book_active.png" alt="">

          <p class="active">发票夹</p>
        </li>
        <router-link to="/inVoiceCheck">
          <li>
            <img src="../assets/images/search.png" alt="">
            <p>发票查验</p>
          </li>
        </router-link>
        <router-link to="/myExpense">
          <li>
            <img src="../assets/images/money.png" alt="">
            <p>我要报销</p>
          </li>
        </router-link>
      </ul>
    </footer>

    <div id="image" @click="imageBox()">
      <img src="" alt="" id="imageSrc"><p>点击屏幕返回</p>
    </div>

  </div>
</template>
<script>
export default {
    name: "myInVoice",
    data() {
        return {
            invoices: [],
            invoicesType: 0,
            invOrderName: 0,
            invVeriStatus: 4,
            invReimbStatus: 4,
            image: "",
         
        };
    },
    methods: {
        // 类型排序
        type() {
            // 把其余的状态赋值为初始状态
            this.invOrderName = 0;
            this.invVeriStatus = 4;
            this.invReimbStatus = 4;
            var strJson = {
                voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                invType: `${this.invoicesType}`
            };
            var str = JSON.stringify(strJson);
            var base64Data = this.Base64.encode(str);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/MDMyInvQuery`,
                data: base64Data
            })
                .then(response => {
                    this.invoices = response.data.invoices;
                    for (var i in this.invoices) {
                        if (this.invoices[i].invType == "1") {
                            this.invoices[i].invType = "增值税专票";
                        } else if (this.invoices[i].invType == "2") {
                            this.invoices[i].invType = "增值税普票";
                        } else if (this.invoices[i].invType == "3") {
                            this.invoices[i].invType = "电子发票";
                        } else if (this.invoices[i].invType == "4") {
                            this.invoices[i].invType = "机动车发票";
                        } else {
                            this.invoices[i].invType = "改类型发票未知";
                        }
                    }

                    //查验状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showV0", false);
                            this.$set(item, "showV2", false);
                            this.$set(item, "showV4", false);
                            this.$set(item, "showVd01", false);
                            this.$set(item, "showV5", false);
                        }
                        if (item.verifyStatus == "0") {
                            item.showV0 = true;
                        } else if (item.verifyStatus == "d01") {
                            item.showVd01 = true;
                        } else if (item.verifyStatus == "2") {
                            item.showV2 = true;
                        } else if (item.verifyStatus == "4") {
                            item.showV4 = true;
                        } else {
                            item.showV5 = true;
                        }
                    });

                    //报销状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showR0", false);
                            this.$set(item, "showR1", false);
                            this.$set(item, "showR2", false);
                            this.$set(item, "showR3", false);
                        }
                        if (item.reimbStatus == "0") {
                            item.showR0 = true;
                        }
                        if (item.reimbStatus == "1") {
                            item.showR1 = true;
                        }
                    });
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        // 时间排序
        timeOrder() {
            // 把其余的状态赋值为初始状态
            this.invoicesType = 0;
            this.invVeriStatus = 4;
            this.invReimbStatus = 4;
            var strJson = {
                voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                invOrderName: `${this.invOrderName}`,
                invOrderType: "0"
            };
            var str = JSON.stringify(strJson);
            var base64Data = this.Base64.encode(str);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/MDMyInvQuery`,
                data: base64Data
            })
                .then(response => {
                    this.invoices = response.data.invoices;
                    for (var i in this.invoices) {
                        if (this.invoices[i].invType == "1") {
                            this.invoices[i].invType = "增值税专票";
                        } else if (this.invoices[i].invType == "2") {
                            this.invoices[i].invType = "增值税普票";
                        } else if (this.invoices[i].invType == "3") {
                            this.invoices[i].invType = "电子发票";
                        } else if (this.invoices[i].invType == "4") {
                            this.invoices[i].invType = "机动车发票";
                        } else {
                            this.invoices[i].invType = "改类型发票未知";
                        }
                    }

                    //查验状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showV0", false);
                            this.$set(item, "showV2", false);
                            this.$set(item, "showV4", false);
                            this.$set(item, "showVd01", false);
                            this.$set(item, "showV5", false);
                        }
                        if (item.verifyStatus == "0") {
                            item.showV0 = true;
                        } else if (item.verifyStatus == "d01") {
                            item.showVd01 = true;
                        } else if (item.verifyStatus == "2") {
                            item.showV2 = true;
                        } else if (item.verifyStatus == "4") {
                            item.showV4 = true;
                        } else {
                            item.showV5 = true;
                        }
                    });

                    //报销状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showR0", false);
                            this.$set(item, "showR1", false);
                            this.$set(item, "showR2", false);
                            this.$set(item, "showR3", false);
                        }
                        if (item.reimbStatus == "0") {
                            item.showR0 = true;
                        }
                        if (item.reimbStatus == "1") {
                            item.showR1 = true;
                        }
                    });
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        //查验状态
        invVStatus() {
            // 把其余的状态赋值为初始状态
            this.invOrderName = 0;
            this.invoicesType = 0;
            this.invReimbStatus = 4;

            var strJson = {
                voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                invVeriStatus: `${this.invVeriStatus}`
            };
            var str = JSON.stringify(strJson);
            var base64Data = this.Base64.encode(str);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/MDMyInvQuery`,
                data: base64Data
            })
                .then(response => {
                    this.invoices = response.data.invoices;
                    for (var i in this.invoices) {
                        if (this.invoices[i].invType == "1") {
                            this.invoices[i].invType = "增值税专票";
                        } else if (this.invoices[i].invType == "2") {
                            this.invoices[i].invType = "增值税普票";
                        } else if (this.invoices[i].invType == "3") {
                            this.invoices[i].invType = "电子发票";
                        } else if (this.invoices[i].invType == "4") {
                            this.invoices[i].invType = "机动车发票";
                        } else {
                            this.invoices[i].invType = "改类型发票未知";
                        }
                    }
                    //查验状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showV0", false);
                            this.$set(item, "showV2", false);
                            this.$set(item, "showV4", false);
                            this.$set(item, "showVd01", false);
                            this.$set(item, "showV5", false);
                        }
                        if (item.verifyStatus == "0") {
                            item.showV0 = true;
                        } else if (item.verifyStatus == "d01") {
                            item.showVd01 = true;
                        } else if (item.verifyStatus == "2") {
                            item.showV2 = true;
                        } else if (item.verifyStatus == "4") {
                            item.showV4 = true;
                        } else {
                            item.showV5 = true;
                        }
                    });

                    //报销状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showR0", false);
                            this.$set(item, "showR1", false);
                            this.$set(item, "showR2", false);
                            this.$set(item, "showR3", false);
                        }
                        if (item.reimbStatus == "0") {
                            item.showR0 = true;
                        }
                        if (item.reimbStatus == "1") {
                            item.showR1 = true;
                        }
                    });
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        //报销状态
        invRStatus() {
            // 把其余的状态赋值为初始状态
            this.invOrderName = 0;
            this.invoicesType = 0;
            this.invVeriStatus = 4;
            var strJson = {
                voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                invReimbStatus: `${this.invReimbStatus}`
            };
            var str = JSON.stringify(strJson);
            var base64Data = this.Base64.encode(str);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/MDMyInvQuery`,
                data: base64Data
            })
                .then(response => {
                    this.invoices = response.data.invoices;

                    for (var i in this.invoices) {
                        if (this.invoices[i].invType == "1") {
                            this.invoices[i].invType = "增值税专票";
                        } else if (this.invoices[i].invType == "2") {
                            this.invoices[i].invType = "增值税普票";
                        } else if (this.invoices[i].invType == "3") {
                            this.invoices[i].invType = "电子发票";
                        } else if (this.invoices[i].invType == "4") {
                            this.invoices[i].invType = "机动车发票";
                        } else {
                            this.invoices[i].invType = "改类型发票未知";
                        }
                    }

                    //查验状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showV0", false);
                            this.$set(item, "showV2", false);
                            this.$set(item, "showV4", false);
                            this.$set(item, "showVd01", false);
                            this.$set(item, "showV5", false);
                        }
                        if (item.verifyStatus == "0") {
                            item.showV0 = true;
                        } else if (item.verifyStatus == "d01") {
                            item.showVd01 = true;
                        } else if (item.verifyStatus == "2") {
                            item.showV2 = true;
                        } else if (item.verifyStatus == "4") {
                            item.showV4 = true;
                        } else {
                            item.showV5 = true;
                        }
                    });

                    //报销状态
                    this.invoices.forEach((item, index) => {
                        if (typeof item.show == "undefined") {
                            this.$set(item, "showR0", false);
                            this.$set(item, "showR1", false);
                            this.$set(item, "showR2", false);
                            this.$set(item, "showR3", false);
                        }
                        if (item.reimbStatus == "0") {
                            item.showR0 = true;
                        }
                        if (item.reimbStatus == "1") {
                            item.showR1 = true;
                        }
                    });
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        // 查看原图
        selectImage(image) {
            document.getElementById("image").style.display = "block";
            document.getElementById("con").style.display = "none";
            document.getElementById("imageSrc").src =
                "data:image/jpeg;base64," + image;
        },
        imageBox() {
            document.getElementById("image").style.display = "none";
            document.getElementById("con").style.display = "block";
        }
    },
    mounted: function() {
        var strJson = {
            voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo="
        };

        var str = JSON.stringify(strJson);
        var base64Data = this.Base64.encode(str);
        this.axios({
            method: "post",
            url: `${this.siteUrl}/MDMyInvQuery`,
            data: base64Data
        })
            .then(response => {
                this.invoices = response.data.invoices;
                for (var i in this.invoices) {
                    if (this.invoices[i].invType == "1") {
                        this.invoices[i].invType = "增值税专票";
                    } else if (this.invoices[i].invType == "2") {
                        this.invoices[i].invType = "增值税普票";
                    } else if (this.invoices[i].invType == "3") {
                        this.invoices[i].invType = "电子发票";
                    } else if (this.invoices[i].invType == "4") {
                        this.invoices[i].invType = "机动车发票";
                    } else {
                        this.invoices[i].invType = "改类型发票未知";
                    }
                }
                //查验状态
                this.invoices.forEach((item, index) => {
                    if (typeof item.show == "undefined") {
                        this.$set(item, "showV0", false);
                        this.$set(item, "showV2", false);
                        this.$set(item, "showV4", false);
                        this.$set(item, "showVd01", false);
                        this.$set(item, "showV5", false);
                    }
                    if (item.verifyStatus == "0") {
                        item.showV0 = true;
                    } else if (item.verifyStatus == "d01") {
                        item.showVd01 = true;
                    } else if (item.verifyStatus == "2") {
                        item.showV2 = true;
                    } else if (item.verifyStatus == "4") {
                        item.showV4 = true;
                    } else {
                        item.showV5 = true;
                    }
                });
                //报销状态
                this.invoices.forEach((item, index) => {
                    if (typeof item.show == "undefined") {
                        this.$set(item, "showR0", false);
                        this.$set(item, "showR1", false);
                        this.$set(item, "showR2", false);
                        this.$set(item, "showR3", false);
                    }
                    if (item.reimbStatus == "0") {
                        item.showR0 = true;
                    }
                    if (item.reimbStatus == "1") {
                        item.showR1 = true;
                    }
                });
                //是否有原图
                this.invoices.forEach((item, index) => {
   
                        this.$set(item, "showYt", true);
            
                    if (item.imageID=="1") {
                        item.showYt = false;
                    }
                 
                });
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header span {
    position: absolute;
    right: 16px;
    top: 15px;
}

header span img {
    height: 20px;
}

nav select {
    float: left;
    width: 25%;
    height: 35px;
    padding-left: 5px;
    background: #fff;
}

.con {
    background: #eee;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 50px;
    display: block;
    margin-top: 85px;
}

.con .voiceList {
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.con .voiceList p {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #eee;
    padding-left: 15px;
    color: #333;
    font-size: 14px;
}

.con .voiceList i {
    position: absolute;
    font-style: normal;
    right: 30px;
    font-size: 12px;
}

.con .voiceList span {
    padding-left: 15px;
}

.con .voiceList label {
    width: 60px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
}

body {
    position: relative;
}

#image {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    background: #fff;
    z-index: 999;
}

#image p {
    text-align: center;
    background: #fff;
    width: 100vw;
    height: 100px;
}

#image img {
    width: 100%;
    /* height: 500px; */
}
</style>
